<template>
  <div class="my">
    <div class="top">
      <span v-on:click="back()" class="iconfont">&#xe779;</span>
      <p class="mytype">达源闪送</p>
    </div>
    <div class="inp">
      <span class="iconfont">&#xe651;</span>
      <input v-model="search" type="text" />
      <router-link :to="{ path: '/home/type', query: { name: search } }">
        <button>搜索</button>
      </router-link>
    </div>
    <div class="fx">
      <h3>搜索发现</h3>
      <ul class="gjc">
        <li @click="sclick('奶茶')">奶茶</li>
        <li @click="sclick('拌饭')">拌饭</li>
        <li @click="sclick('冰激凌')">冰激凌</li>
        <li @click="sclick('七个半')">七个半</li>
        <li @click="sclick('栖见茗山')">栖见茗山</li>
        <li @click="sclick('阿布到家')">阿布到家</li>
        <li @click="sclick('烧仙草')">烧仙草</li>
        <li @click="sclick('拿铁')">拿铁</li>
      </ul>
    </div>
    <div class="cnxh">
      <h3>猜你喜欢</h3>
      <ul>
        <router-link :to="{ path: '/home/type', query: { name: '七个半' } }">
          <li>
            <img
              src="https://img.yhatm.cn/images/815/2021/10/Jms27Co00ho2H258b8moSyB0k3zmgU.png"
              alt=""
            />
            <span>七个半</span>
          </li>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { name: '栖见茗山' } }">
          <li>
            <img
              src="https://img.yhatm.cn/images/815/2020/11/tHIGhIjiIhRJ3g2J3gnI2u41iN2ag3.jpg"
              alt=""
            />
            <span>栖见茗山</span>
          </li>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { name: '阿布到家' } }">
          <li>
            <img
              src="https://img.yhatm.cn/images/815/2021/08/ILtVViEf11necS1YEVnvCnvVVZLvcL.jpg"
              alt=""
            />
            <span>阿布到家.拌饭</span>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.my {
  .top {
    top: 0;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: rgb(22, 187, 250);
    display: flex;
    span {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
      color: white;
    }
    p {
      font-size: 18px;
      font-weight: bold;
      color: white;
      width: 100%;
      line-height: 50px;
      text-align: center;
      margin: 0;
      padding: 0;
      margin-left: -40px;
    }
  }
  .inp {
    top: 50px;
    position: relative;
    height: 45px;
    span {
      left: 20px;
      top: 13px;
      position: absolute;
      z-index: 50;
    }
    input {
      top: 8px;
      left: 10px;
      height: 23px;
      width: 60%;
      padding-left: 30px;
      position: absolute;
      outline: none;
      border: 2px solid rgb(22, 187, 250);
      border-radius: 20px;
      background-color: rgb(242, 242, 242);
    }
    button {
      font-weight: bold;
      font-size: 15px;
      color: white;
      background-color: rgb(22, 187, 250);
      width: 63px;
      height: 30px;
      top: 7px;
      border-radius: 5px;
      border: none;
      position: absolute;
      right: 20px;
    }
  }
  .fx {
    margin-top: 50px;
    h3 {
      margin: 0;
      font-weight: 600;
      padding: 0;
      font-size: 16px;
      margin-left: 10px;
    }
    .gjc {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      li {
        padding: 10px;
        margin: 5px 10px;
        background-color: rgb(236, 236, 236);
        font-size: 13px;
        border-radius: 10px;
      }
    }
  }
  .cnxh {
    margin: 20px 10px;
    padding-bottom: 20px;
    box-shadow: 0 0 3px rgba(22, 187, 250, 0.8);
    h3 {
      background-image: linear-gradient(rgba(22, 187, 250, 0.3), white);
      margin: 0;
      padding: 20px 10px;
      font-size: 16px;
    }
    ul {
      margin: 0;
      padding: 10px;
      li {
        display: flex;
        height: 50px;
        border-top: 1px solid rgb(223, 223, 223);
        img {
          border-radius: 50%;
          padding: 10px;
          width: 30px;
          height: 30px;
        }
        span {
          line-height: 50px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
<script>
export default {
  name: "search",
  data() {
    return {
      search: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    sclick(a) {
      this.search = a;
      this.$router.push({ path: "/home/type", query: { name: this.search } });
    },
  },
};
</script>